import React from 'react'
import {Carousel, Popover, Menu, Dropdown, Tooltip, Modal} from 'antd';
import {Panel as ColorPickerPanel} from 'rc-color-picker';
import 'rc-color-picker/assets/index.css';
import Const from "../Const";
import arrayUtil from "../basic/utils/arrayUtil";
import ModalAddColor from "./modal/ModalAddColor";

class PixelPanel extends React.Component {
    modalRef = null;
    carouselRef = null;
    pickColor = '#ffff00';

    constructor(props) {
        super(props);
        this.carouselRef = React.createRef();
        this.modalRef = React.createRef();
        this.state = {
            colorList: [],
            selectPoint: null
        }
    }

    initPanelData = () => {
        let colorList = [
            '#efa',
            '#eab',
            '#aab',
            '#eda',
            '#f2f',
            '#f22',
            '#daa',
            '#419',
            '#eab',
            '#aab',
            '#eda',
            '#f2f',
            '#f22',
            '#daa',
            '#daa',
            '#daa',
            '#daa',
            '#daa',
            '#419',
            '#eab',
            '#aab',
            '#eda',
            '#f2f',
            '#f22',
            '#daa',
            '#419',
        ];
        colorList = arrayUtil.splitArr(colorList, 10);
        this.setState({
            colorList
        })
    }

    //组件被render之后调用
    componentDidMount() {
        this.initPanelData();
    }

    //组件被移除DOM之后调用
    componentWillUnmount() {

    }

    carouselEvent(event) {
        this.carouselRef.current[event]();
    }

    onColorChange(colorCode) {
        console.log(colorCode)
        // this.pickColor = colorCode.hex;
    }

    //选择颜色
    selectColor = (color) => {
        return (
            <div>
                <p>{color}</p>
                <p>Content</p>
            </div>
        )
    }
    renderRightMenu = (item) => {
        return (
            <Menu>
                <Menu.Item key="0">复制颜色</Menu.Item>
                <Menu.Item key="1">修改颜色</Menu.Item>
                <Menu.Item key="2">删除颜色</Menu.Item>
            </Menu>
        )
    }

    renderColorPanel = () => {
        return (
            <div className='add-color-panel'>
                <ColorPickerPanel enableAlpha={false} color={'#345679'} onChange={this.onColorChange} mode="RGB"/>
            </div>
        )
    }


    render() {
        let {colorList} = this.state;
        return (
            <div className='ctrl-warp'>
                <div className='energy red'>
                    血槽
                </div>
                <div className='ctrl-c-warp'>
                    <div className='arrow-btn ' onClick={this.carouselEvent.bind(this, 'prev')}>
                        <em className='iconfont icon-zuo'/>
                    </div>
                    <div className='g-warp'>
                        <Carousel ref={this.carouselRef} dots={false}>
                            {
                                colorList.map((arr, index) => {
                                    return (
                                        <div key={index} className='g-warp-parent'>
                                            {
                                                arr.map((color, cIndex) => {
                                                    return (
                                                        <Dropdown overlay={this.renderRightMenu(color)} key={cIndex}
                                                                  trigger={['contextMenu']}>
                                                            <Tooltip title={'颜色名称(A)'}>
                                                                <div className={`color-item ${cIndex === 2 ? 'active':''}`}
                                                                     style={{background: color}}>
                                                                    <span className={'color-keymap'}>A</span>

                                                                </div>
                                                            </Tooltip>
                                                        </Dropdown>
                                                    )
                                                })
                                            }
                                        </div>
                                    )
                                })
                            }
                        </Carousel>
                    </div>

                    <div className='arrow-btn ' onClick={this.carouselEvent.bind(this, 'next')}>
                        <em className='iconfont icon-zuo right'/>
                    </div>

                </div>
                <div className='color-item-add' onClick={() => {
                    this.modalRef.current.show(true);
                }}>
                    <em className='iconfont icon-tianjia'></em>
                </div>
                <ModalAddColor ref={this.modalRef}/>
                <div className='energy blue'>
                    蓝槽
                </div>
            </div>

        )
    }
}

export default PixelPanel
